<template>
  <div class="click-menu">
    <h2>右键不同的区域显示不同的菜单</h2>
    <div class="box">
      <div class="box1">
        <p>box1-自定义右键菜单</p>
        <MenuList
          :className="'box1-menu'"
          :menu="[
            { label: 'box1-选项-1' },
            { label: 'box1-选项-2' },
            { label: 'box1-选项-3' },
            { label: 'box1-选项-4' },
          ]"
          @choose="choose"
        >
        </MenuList>
      </div>
      <div class="box2"><p>box2-系统默认右键菜单</p></div>
      <div class="box3">
        <p>box3-自定义右键菜单-支持其他参数</p>
        <MenuList
          :className="'box3-menu'"
          :menu="[
            { label: 'box3-选项-1' },
            { label: 'box3-选项-2' },
            { label: 'box3-选项-3' },
            { label: 'box3-选项-4' },
          ]"
          @choose="choose"
        >
        </MenuList>
        <div class="box4">
          <p>box4-自定义右键菜单-支持在嵌套结构中使用</p>
          <MenuList
            :className="'box4-menu'"
            :menu="[
              { label: 'box4-选项-1' },
              { label: 'box4-选项-2' },
              { label: 'box4-选项-3' },
              { label: 'box4-选项-4' },
            ]"
            @choose="choose"
          >
          </MenuList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClickMenu",
};
</script>

<script setup>
import MenuList from "@/components/menu-list";
import { ref } from "vue";

const choose = (val) => {
  alert("你点击了 " + val + "\n如有后续操作可在编写后续逻辑");
};
</script>

<style lang='scss' scoped>
.click-menu {
  h2 {
    text-align: center;
  }
  .box {
    width: 100%;
    height: 80vh;
    text-align: center;
    display: flex;
    justify-content: space-around;
    p {
      font-size: 16px;
      font-weight: 700;
      width: 50%;
      margin-top: 150px;
    }
    .box1 {
      background: #00a4ff;
      flex: 1;
    }
    .box2 {
      background: #cc58cc;
      flex: 1;
    }
    .box3 {
      background: #dd9971;
      flex: 1;
      position: relative;
      .box4 {
        position: absolute;
        box-sizing: border-box;
        height: 40%;
        width: 80%;
        background: yellow;
        bottom: 50px;
        right: 50px;
      }
    }
  }
}
</style>